<template>
  <div class="footer_container">
    <div class="infos">
      <div class="infos_wrapper">
        <div class="infos_content">
          <div class="infos_cell">
            <nav class="bnav">
              <div class="infos_box">
                <dl class="botUl">
                  <dt class="botDt">
                    <a href="/about.html" class="botLink blink">关于三鼎</a>
                  </dt>
                  <!--关于-->
                  <dd v-for="item in displayedCategory[0].children" :key="item.route" class="sbotDd">
                    <router-link :to="item.route" class="botLinkS blink">{{ item.value }}</router-link>
                  </dd>
                </dl>
                <dl class="botUl">
                  <dt class="botDt">
                    <a href="/project.html" class="botLink blink">解决方案</a>
                  </dt>
                  <!--方案-->
                  <dd class="sbotDd">
                    <router-link to="/article-16" class="botLinkS blink">三鼎未来智慧公安可...</router-link>
                  </dd>
                  <dd class="sbotDd">
                    <router-link to="/article-15" class="botLinkS blink">三鼎未来智慧校园健...</router-link>
                  </dd>
                  <dd class="sbotDd">
                    <router-link to="/article-14" class="botLinkS blink">三鼎未来智慧交通大...</router-link>
                  </dd>
                </dl>
                <dl class="botUl">
                  <dt class="botDt">
                    <a href="/news.html" class="botLink blink">新闻资讯</a>
                  </dt>
                  <!--新闻-->
                  <dd v-for="item in displayedCategory[1].children" :key="item.route" class="sbotDd">
                    <router-link :to="item.route" class="botLinkS blink">{{ item.value }}</router-link>
                  </dd>
                </dl>
              </div>
            </nav>
          </div>
          <div class="infos_contact">
            <h6>
              <span style="font-family:微软雅黑;font-size:16px;line-height:2">
                <a href="/contact.html" class="botLink blink" style="color:#FFFFFF">联系我们</a><br>
                <span style="color:#7d7d7d">
                  广东三鼎实业集团有限公司<br>
                  地址：广东省东莞市南城街道龙旺埔路一巷16号114室<br>
                  邮箱：sand88686668@163.com<br>
                  联系方式：0769-88686668 | 8880 0028-118<br>
                </span>
              </span>
            </h6>
          </div>
          <div class="infos_qr">
            <div class="qr">
              <div class="qr_img_wrapper">
                <img src="../assets/sand_bottom_rwm.jpg" alt="广东三鼎实业集团有限公司" title="广东三鼎实业集团有限公司" width="100%" height="100%">
              </div>
              <div class="qr_text">
                <h2 style="text-align: center;">
                  <span style="color:#7d7d7d;font-size:16px;font-family:微软雅黑;line-height:3">
                    扫一扫关注二维码
                  </span>
                </h2>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="fline">
      <div class="line"></div>
    </div>
    <div class="copyright">
      <div class="copyright_cell">
        <span style="line-height:2;font-size:14px;color:#a5a4a5;font-family:微软雅黑">
          COPYRIGHT © 广东三鼎实业集团有限公司
          <a href="https://beian.miit.gov.cn/" target="_blank" style="color:#A5A4A5;">粤ICP备2021108031号</a>
        </span>
      </div>
    </div>
  </div>
</template>

<script>
import category from '@/fake-data/category'

export default {
  name: 'FooterSection',
  data () {
    return {
      category
    }
  },
  computed: {
    displayedCategory () {
      return this.category.filter((item) => item.hasChildren)
    }
  }
}
</script>

<style lang="less" scoped>
.footer_container {
  height: auto;
  max-height: none;
  min-width: 0;
  min-height: 145px;
  background-color: #313131;
  .infos {
    width: 100%;
    .infos_wrapper {
      padding: 96px 0 16px;
      .infos_content {
        display: flex;
        margin: 0 auto;
        width: 94%;
        max-width: 1620px;
        height: auto;
      }
    }
    .infos_cell {
      width: 30.599999999999998%;
      .infos_box {
        display: flex;
        justify-content: space-between;
      }
    }
    .infos_contact {
      margin-left: 5%;
      width: 24.692499999999995%;
    }
    .infos_qr {
      margin-right: 0;
      margin-left: 5%;
      width: 17.467499999999998%;
      .qr {
        width: 100%;
        margin: 0 0 0 auto;
        max-width: 157px;
        .qr_img_wrapper {
          width: 100%;
          height: 100%;
          text-align: center;
          position: static;
        }
      }
    }
  }

  .fline, .copyright {
    margin: 0 auto;
    padding: 0;
    width: 94%;
    height: auto;
    max-width: 1620px;
    max-height: none;
    min-width: 0;
    min-height: 20px;
  }
  .line {
    border-top: 1px solid #f0f0f0;
    border-top-color: #a0a0a0;
    width: 100%;
    display: inline-block;
    vertical-align: middle;
  }

  .copyright_cell {
    padding: 16px 0 48px 0;
  }

  .botLink {
    color: #fff;
    font-weight: 400!important;
    font-size: 16px;
    line-height: 2;
  }

  .sbotDd {
    margin-bottom: 0;
  }

  .botLinkS {
    color: #7d7d7d;
    font-size: 16px;
    line-height: 2;
  }
}
</style>
